<template>
  <el-form
    ref="formRef"
    label-position="right"
    label-width="100px"
    :model="bannerData"
    style="max-width: 460px"
  >
    <el-form-item label="图片地址">
      <el-input v-model="bannerData.img" />
    </el-form-item>
    <el-form-item label="图片提示">
      <el-input v-model="bannerData.alt" />
    </el-form-item>
    <el-form-item label="图片链接">
      <el-input v-model="bannerData.link" />
    </el-form-item>
    <el-button @click="AddBanner">添加</el-button>
    <el-button>修改</el-button>
  </el-form>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { IBanner } from "@/MyTs/index"; //ts
import type { FormInstance } from "element-plus";
import { getAddBannerApi } from "@/api/Banner";
import { ElMessage } from "element-plus"; //提示引入
interface IEmits {
  (e: "close"): void;
}
const emits = defineEmits<IEmits>();

const bannerData = reactive<IBanner>({
  img: "",
  alt: "",
  link: "",
});
const formRef = ref<FormInstance>();
function AddBanner() {
  getAddBannerApi(bannerData).then((res) => {
    if (res.data.code == 200) {
      ElMessage({
        message: "添加成功",
        type: "success",
      });
      //清空输入框缓存数据
      clearData();
      emits("close"); //关闭抽屉
    }
  });
}
//清空缓存数据
function clearData() {
  bannerData.img = "";
  bannerData.alt = "";
  bannerData.link = "";
}

defineExpose({ clearData });
</script>

<style lang="scss" scoped></style>
